Google Charts লাইব্রেরি ব্যবহার করতে হলে প্রথমে সেটি আপনার ওয়েব পেজে ইন্টিগ্রেট করতে হবে। Google Charts একটি JavaScript লাইব্রেরি, যা ডেটাকে সুন্দর ও ইন্টারঅ্যাকটিভ চার্টে রূপান্তরিত করার জন্য ব্যবহৃত হয়। সেটআপের জন্য আপনাকে কিছু সহজ ধাপ অনুসরণ করতে হবে। নিচে বিস্তারিতভাবে ব্যাখ্যা করা হলো কীভাবে Google Charts লাইব্রেরি সেটআপ করবেন।
১. Google Charts লাইব্রেরি লোড করা
Google Charts ব্যবহার করতে হলে প্রথমে Google Charts Loader স্ক্রিপ্ট লোড করতে হবে। এটি আপনার HTML ফাইলের <head> ট্যাগে যুক্ত করতে হবে।
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
এই কোডটি Google Charts লাইব্রেরি লোড করবে, যা পরবর্তীতে আপনি ব্যবহার করবেন চার্ট তৈরি করার জন্য।
২. Google Charts লাইব্রেরি লোডের পরে চার্ট তৈরি করা
Google Charts লাইব্রেরি লোড হওয়ার পরে, আপনি যে চার্টটি তৈরি করতে চান, তার জন্য প্রয়োজনীয় প্যাকেজ লোড করতে হবে। এখানে সাধারণভাবে corechart প্যাকেজ ব্যবহার করা হয়, যা বিভিন্ন ধরনের চার্ট (যেমন, বার চার্ট, লাইন চার্ট, পাই চার্ট) তৈরি করতে সাহায্য করে।
google.charts.load('current', {packages: ['corechart']});
এই কোডটি Google Charts এর corechart প্যাকেজ লোড করবে। আপনি যদি অন্য কোনো প্যাকেজ ব্যবহার করতে চান (যেমন geochart, table, calendar), তবে packages এর মধ্যে সেই প্যাকেজগুলো যোগ করতে হবে।
৩. কলব্যাক ফাংশন সেট করা
Google Charts ব্যবহার করার পর পরবর্তী ধাপে setOnLoadCallback ফাংশন ব্যবহার করে আপনি যখন চার্ট তৈরির কাজ শুরু করবেন, তখন সেটি কলব্যাক হিসেবে কাজ করবে।
google.charts.setOnLoadCallback(drawChart);
এখানে drawChart হল সেই ফাংশন যা চার্টটি বাস্তবায়ন করবে।
৪. চার্ট তৈরি করা
চার্ট তৈরির জন্য একটি সাধারণ ফাংশন লিখতে হবে যেখানে ডেটা প্রস্তুত করা হবে এবং সেই ডেটা দিয়ে চার্টটি প্রদর্শন করা হবে। উদাহরণস্বরূপ, একটি লাইন চার্ট তৈরি করার কোড:
function drawChart() {
// ডেটা তৈরি করা
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
// চার্টের জন্য অপশন সেট করা
var options = {
title: 'Company Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'},
curveType: 'function',
legend: { position: 'bottom' }
};
// চার্ট তৈরি করা এবং প্রদর্শন
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
৫. HTML এ কনটেইনার তৈরি করা
এখন আপনাকে HTML ডকুমেন্টে একটি কনটেইনার তৈরি করতে হবে যেখানে চার্টটি প্রদর্শিত হবে। সাধারণত, <div> ট্যাগ ব্যবহার করা হয়। উদাহরণ:
<div id="line_chart" style="width: 900px; height: 500px;"></div>
এখানে id="line_chart" হল সেই ডিভ, যেখানে চার্টটি প্রদর্শিত হবে।
সম্পূর্ণ কোড উদাহরণ
এখন সমস্ত কোড একত্রে দেখুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লোড করা
google.charts.load('current', {packages: ['corechart']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// চার্ট তৈরি করার ফাংশন
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
var options = {
title: 'Company Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'},
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Charts Example</h2>
<div id="line_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
উপসংহার
Google Charts এর লাইব্রেরি সেটআপ করা খুবই সহজ। শুধু লাইব্রেরি লোড করতে হবে, তারপর প্যাকেজ লোড করে ডেটা এবং চার্ট তৈরির ফাংশন লিখলেই আপনার চার্ট তৈরি হয়ে যাবে। এই সেটআপের মাধ্যমে আপনি যে কোনো ধরনের চার্ট তৈরি করতে পারবেন এবং ডেটা ভিজ্যুয়ালাইজেশন করতে পারবেন।
Read more
